<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
		<script src="css/js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<script src="css/js/axios.min.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<form>
				店铺名称：<input type="text" v-model="name">
				店铺地址：<input type="text" v-model="address">
				<input type="button" value="添加"@click="add()">
			</form>
			<table class="table">
				<tr>
					<td>编号</td>
					<td>店铺名称</td>
					<td>店铺地址</td>
					<td>操作</td>
				</tr>
				<tr v-for="v in shops">
					<td>{{v.ID}}</td>
					<td>{{v.name}}</td>
					<td>{{v.address}}</td>
					<td><input type="button" value="删除"></td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
var app=new Vue({
	el:"#app",
	data:{
		shops:[{ "ID": 4, "CreatedAt": "2025-03-21T12:06:59.177+08:00", "UpdatedAt": "2025-03-21T12:06:59.177+08:00", "DeletedAt": null, "name": "华莱士", "address": "浦东新区惠南镇滴翠路1188号" }],
		name:"",
		address:"",
	},
	methods:{
		add(){
			var data=new FormData()
			data.append("name",this.name)
			data.append("address",this.address)
			axios.post("http://127.0.0.1:8080/shops/add",data).then(function(res){
				console.log(res.data.data)
				alert(res.data.data)
				location.reload()
			})
		},
	},
	created:function(){
		axios.get("http://127.0.0.1:8080/shops/list").then(function(res){
			console.log(res.data)
			app.shops=res.data.data
		})
	}
})
</script>